<template>
	<view class="list">
	   <view class="province">
	   	  <scroll-view  style="height: 100%;" scroll-y="true">
			  <view class="item smTitle" v-for="(pro,proIndex) in cityData" :key="proIndex" :class="{mblue:current == proIndex}" @click="getCurrentPro(proIndex)">
			  	  {{pro.value}}
			  </view>
		</scroll-view>  
	   </view>
	   
	   <view class="city">
	   	  <scroll-view  style="height: 100%;" scroll-y="true">
			  <view class="item" v-for="(city,cityIndex) in cityData[current].children"  :key="cityIndex" :class="{mblue:cityCurrent == cityIndex}" @click="getCurrentPro(cityIndex)">
			  	 {{city.value}}
			  </view>
	   	  </scroll-view>  
	   </view>
	   
	   <edit-bar @clearOut="clearOut" @confirm="confirm"></edit-bar>
	</view>
</template>

<script>
import cityData from '../../../utils/citydata.js';
import editBar from '../../commponent/home/editBar.vue'	
export default {
	data() {
		return {
			cityData:cityData,
			current:0,
			cityCurrent:0,
			
		};
	},
	
	components:{
	editBar	
	},

	methods: {
		getCurrentPro(Index){
			this.current = Index;
		},
		clearOut(){
			this.cityCurrent = -1;
		},
		confirm(){
		 uni.navigateTo({
		 	url:'/pages/views/home/addJob?city='+this.cityData[this.current].children[this.cityCurrent].value+' '
		 })
		}
	}
};
</script>

<style scoped lang="less">
	.list{
		border-top: 2px solid #ededed;
		display: flex;
	
		
		.province{
			width: 50%;
			height: calc(100vh - 204upx);
			border-right: 2px solid #DCDCDC;
			
			.item{
				width: 100%;
				text-align: center;
				padding-top:50upx ;
			}
		}
		
		.city{
			width: 50%;
			height: calc(100vh - 204upx);
			
			.item{
				width: 100%;
				text-align: center;
				padding-top:50upx ;
			}
		}
	}
</style>
